<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body,
        div,
        input {
            margin: 0;
            padding: 0;
        }

        input {
            outline: none;
        }

        #outer {
            width: 300px;
            margin: 10px auto;
            padding: 0 15px 30px;
            color: white;
            background: black;
            text-align: center;
        }

        #outer input.f-text {
            width: 35px;
            height: 20px;
            margin: 30px 5px;
            text-align: center;
        }

        #btn {
            display: block;
            width: 270px;
            margin: 0 auto;
            background: pink;
            padding: 10px;
            text-align: center;
            color: white;
            font-size: 20px;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var oDiv = document.getElementById("outer");
            var oBtn = document.getElementById("btn");
            var s = false;
            var timer = null;
            oBtn.onclick = function () {
                if (s == false) {
                    timer = setInterval(updateTime, 1000);
                    updateTime();

                    this.style.cssText = "background:red";
                    this.innerHTML = "取消";
                    s = true;
                }
                else {
                    clearInterval(timer);

                    this.style.cssText = "";
                    this.innerHTML = "启动";
                    s = false;
                }
                function format(a) {
                    return a.toString().replace(/^(\d)$/, "0$1");
                }
                function updateTime() {
                    var oInput = oDiv.getElementsByTagName("input");
                    /* 分钟位的数转为秒数，加上秒位的数 */
                    var oRemain = oInput[0].value.replace(/^0/, "") * 60 + parseInt(oInput[1].value.replace(/^0/, ""));
                    /* 当分秒全部归零时，清除重复*/
                    if (oRemain <= 0) {
                        clearInterval(timer);
                        return;
                    }
                    /* 自动减一运算 */
                    oRemain--;
                    /* 分秒位重新赋值 */
                    oInput[0].value = format(parseInt(oRemain / 60));
                    oRemain %= 60;
                    oInput[1].value = format(parseInt(oRemain));
                }
            }
        }
    </script>
</head>

<body>
    <div id="outer">
        <input type="text" class="f-text" readonly="readonly" maxlength="2" value="01" />
        <span>分钟</span>
        <input type="text" class="f-text" readonly="readonly" maxlength="2" value="10" />
        <span>秒</span>
        <button id="btn">启动</button>
    </div>
</body>

</html>